<template>
  <div id="app">
    <v-header></v-header>
    <div class="nav">
      <ul>
        <router-link v-for="item in data" :key="item.name" :to="item.link" tag="li">{{item.name}}</router-link>
      
      </ul>
      
    </div>
    
    <router-view></router-view>
  </div>
</template>

<script>
  import VHeader from './layouts/header.vue'
  export default {
    data(){
      return{
        data:[
          {name:'推荐',link:'/recom'},
          {name:'排行榜',link:'/toplist'},
          {name:'搜索',link:'/search'}
        ]
      }
    },
    name: 'App',
    components:{
      VHeader
    }
  }
</script>

<style lang="scss">
  #app{
    .nav{
      width: 100%;
      ul{
          overflow: hidden;
          background: #fff;
          li{
              width: 33%;
              height: r(40px);
              float: left;
              font-size: 0.5rem;
              text-align: center;
              line-height: r(40px);
              position: relative;
              color: rgba(0,0,0,.6);
              cursor: pointer;
              &.router-link-active{
                  color: #31c27c; 
                  &::after{
                      content: "";
                      display: block;
                      position: absolute;
                      bottom: 0;
                      left: 0;
                      right: 0;
                      height: 2px;
                      background: #31c27c;
                  }
              }
          }
      }
    }
  }
  
</style>
